<template>
    <scroll-view scroll-y="true" class="contenr" @scroll="scrolle">
        <view class="content">
            <!-- 头部--search -->
            <view class="header" :class="act ? 'act' : ''">
                <view class="header-warp">
                    <view class="search" @click="get_search">
                        <img src="../../static/images/home/search.png" alt="">
                        <text class="input">搜索商品</text>
                    </view>
                    <view class="news">
                        <u-icon class="act_a" name="bell-fill" size="20px" color="#f7594d"></u-icon>
                    </view>
                </view>
            </view>
            <!-- 轮播图 -->
            <view class="swiper-wrapper">
                <swiper indicator-dots autoplay circular>
                    <swiper-item v-for="(item, index) in banners" :key="index">
                        <img :src="item.img" alt="">
                    </swiper-item>
                </swiper>
            </view>

            <view class="warp">
                <!-- 分类 -->
                <view class="nav-pet">
                    <view class="pet_a" v-for="(item, index) in ment" :key="index">
                        <view class="img_warp">
                            <!-- <img src="../../static/images/home/nav1.png" alt=""> -->
                            <image :src="item.img" mode="scaleToFill" />
                        </view>
                        <text>{{ item.name }}</text>
                    </view>

                </view>
                <!-- 推荐榜单 -->
                <view class="recommend">
                    <view class="name_h1">推荐榜单</view>
                    <view class="conter">
                        <view class="reco_warp" v-for="(item, index) in competitive" :key="index">
                            <view class="reco_t">
                                <img :src="item.img" alt="">
                            </view>
                            <view class="reco_f">
                                <img src="../../static/images/home/rank.png" alt="">
                                <text class="reco_txt">{{ item.name }}</text>
                            </view>
                        </view>

                    </view>
                </view>
                <!-- 猜你喜欢 -->
                <view class="guess_like">
                    <view class="name_h1">猜你喜欢</view>
                    <view class="guess_warp">
                        <view class="guess_warp_nv" v-for="(item, index) in get_like" :key="index"
                            @click="get_datail(item)">
                            <img :src="item.img" alt="">

                            <text class="guess_fsz">{{ item.name }}</text>
                            <view class="guess_f">
                                <text class="pc">￥{{ item.price }}</text>
                                <text class="sold_out">已售{{ item.stock }}件</text>
                            </view>
                        </view>

                    </view>

                </view>
            </view>
        </view>

    </scroll-view>
</template>

<script>
import { get_banner, get_competitive, get_like, get_cate } from "../../api/api"
export default {
    data() {
        return {
            banners: [],
            ment: [],
            get_like: [],
            cate: [],
            competitive: [],
            act: false
        }
    },
    mounted() {
        //获取轮播图图片
        get_banner().then(res => {
            console.log(res)
            console.log(res.data)
            this.banners = res.data
        })
        //分类
        get_cate({
            position: "index"
        }).then(res => {
            console.log(res)
            this.ment = res.data
        })
        //推荐榜单
        get_competitive({
            skip: "0",
            limit: "3"
        }).then(res => {
            console.log(res)
            this.competitive = res.data
        })

        //猜你喜欢
        get_like({ skip: '0', limit: "10" }).then(res => {
            console.log(res.data)
            this.get_like = res.data
        })


    },
    methods: {
        //控制头部背景颜色
        scrolle(e) {

            if (e.detail.scrollTop >= 40) {
                this.act = true
            } else {
                this.act = false
            }
        },
        //去忘详情页
        get_datail(item) {
            console.log(item)
            let id = item._id
            console.log(id)
            uni.navigateTo({ url: '/pages/DetailPages/DetailPages?id=' + id })

        },
        //去往搜索页
        get_search() {
            uni.navigateTo({
                url: '/pages/search/search'
            })
        }
    },

}
</script>

<style lang="scss" scoped>
body {
    background-color: #fff;
}

.contenr {
    width: 100%;
    height: 100vh;


    .content {


        .header {
            width: 100%;
            height: 30px;
            position: fixed;
            z-index: 999;
            // background-color: #000;
            padding: 5px 0;

            &.act {
                background-color: #fcd932;

                .act_a {
                    color: #fff;
                }
            }

            .header-warp {
                width: 92%;
                height: 100%;
                margin: 0 auto;
                // margin-top: 10px;
                display: flex;

                .search {
                    width: 85%;
                    height: 100%;
                    background-color: #fff;
                    border-radius: 25px;
                    display: flex;
                    flex-direction: row;
                    align-items: center;

                    img {
                        margin: 0 15px 0 20px;
                        width: 18px;
                        height: 18px;

                    }

                    .input {
                        font-size: 14px;
                    }
                }

                .news {
                    width: 15%;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                }
            }
        }

        .swiper-wrapper {
            width: 100%;
            height: 200px;

            swiper {
                width: 100%;
                height: 200px;
            }

            img {
                width: 100%;
                height: 200px;
            }
        }

        .warp {
            width: 90%;
            margin: 20px auto;

            .nav-pet {
                width: 100%;
                height: 100px;
                display: flex;
                justify-content: space-around;
                align-items: center;
                background-color: #fff;

                .img_warp {
                    width: 50px;
                    height: 50px;


                    image {
                        width: 100%;
                        height: 100%;
                        margin-left: 7px;
                    }
                }
            }

            .recommend {
                width: 100%;

                .name_h1 {
                    font-size: 18px;
                    font-weight: bold;
                    color: #000;
                    margin: 10px 0;
                }

                .conter {
                    width: 100%;
                    display: flex;
                    justify-content: space-around;
                    align-items: center;
                }

                .reco_warp {
                    width: 32%;

                    .reco_t {
                        img {
                            width: 100%;
                            height: 130px;
                        }
                    }

                    .reco_f {
                        width: 100%;
                        // display: flex;
                        // justify-content: space-around;
                        text-align: center;

                        img {
                            vertical-align: middle;
                            width: 15px;
                            height: 15px;
                        }

                        .reco_txt {
                            width: 100%;
                            /*让长段文本不换行*/
                            overflow: hidden;
                            text-overflow: ellipsis;
                            display: -webkit-box;
                            -webkit-line-clamp: 1; // 控制多行的行数
                            -webkit-box-orient: vertical;
                        }
                    }
                }
            }

            .guess_like {
                width: 100%;

                .name_h1 {
                    font-size: 18px;
                    font-weight: bold;
                    color: #000;
                    margin: 10px 0;
                }

                .guess_warp {
                    width: 100%;
                    // display: flex;
                    // justify-content: space-between;
                    display: flex;
                    flex-wrap: wrap;
                    justify-content: flex-end;
                    align-content: space-around;

                    .guess_warp_nv {
                        width: 47%;
                        margin: 10px 5px;
                        // float: left;
                        background-color: #fff;


                        img {
                            width: 100%;
                            height: 200px;
                        }

                        .guess_fsz {
                            font-size: 16px;
                            width: 95%;
                            margin: 0 auto;
                            font-weight: 400;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            display: -webkit-box;
                            -webkit-line-clamp: 2; // 控制多行的行数
                            -webkit-box-orient: vertical;

                        }

                        .guess_f {
                            width: 95%;
                            margin: 10px auto;
                            font-size: 14px;
                            display: flex;
                            justify-content: space-between;

                            .pc {
                                color: #f8655f;
                            }

                            .sold_out {
                                color: #bdbdbd;
                            }
                        }
                    }


                }
            }
        }
    }
}
</style>
